<template>
	<div class="container" @mouseleave="onMouseLeave">
		<div
			v-for="(item, index) in 5"
			:class="{
                circle: true,
                active: currentIndex >= index,
            }"
			:key="index"
			@mouseenter="onMouseEnter(index)"
            @click="onClick(index)"
		></div>
	</div>
</template>
<script>
export default {
	data() {
		return {
            clickIdx: -1,
			currentIndex: -1,
			// list: new Array(5).fill(false),
            // list: [false, false, false, false, false]
		};
	},
	methods: {
		onMouseEnter(idx) {
            // 悬停时记住索引
			this.currentIndex = idx;
		},
		onMouseLeave() {
            // 移开时恢复点击的索引
			this.currentIndex = this.clickIdx;
		},
        onClick(idx) {
            // 点击时记住索引
            this.clickIdx = idx;
        }
	},
};
</script>

<style scoped>
.container {
	display: flex;
}
.circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgb(172, 158, 158);
	margin-left: 40px;
}
.circle.active {
	background-color: orange;
}
</style>